<script setup>
import http from "@/utils/http.js";
import {userStore} from "@/stores/userStore.js";
import {onMounted, onUpdated, ref} from "vue";
import {ElMessage} from "element-plus";
import {useRouter} from "vue-router";

const router = useRouter()
const uStore = userStore()

const cartList = ref([])
const getGoods = async () => {
  const res = await http.get('/items/' + uStore.userInfo.data.userId)
  cartList.value = res.data
}

const count = ref({
  sum: 0,
  price: 0
})

const sumPrice = () => {
  const num = ref(0)
  const allPrice = ref(0)

  cartList.value.forEach(g => {
    if(g.state === 1) {
      num.value++
      allPrice.value += g.goodsPrice
    }
  })

  count.value.sum = num.value
  count.value.price = allPrice.value
}

const del = async (goodsId) => {
  const res = await http.delete('/items/delete/' + goodsId)

  if (res.code === 666) {
    ElMessage({type: 'success', message: '删除成功'})
    await getGoods()
  }
}

const placeOrder = () => {
  if (count.value.sum === 0) {
    ElMessage({type: 'warning', message: '购物车中暂无可购物品'})
    return
  }

  router.replace({path: '/payment'})
}

const stateText = (state) => {
  const states = ['未上架', '待售', '已售', '已下架']
  return states[state] || '未知'
}

const stateTagType = (state) => {
  switch (state) {
    case 0:
      return 'info'
    case 1:
      return 'success'
    case 2:
      return 'warning'
    case 3:
      return 'danger'
    default:
      return ''
  }
}

onMounted(() => {
  getGoods()
})

onUpdated(() => {
  sumPrice()
})

</script>

<template>
    <div class="custom-cart-page">
      <div class="cart-container">
        <!-- 购物车标题 -->
        <h2 class="cart-title">我的购物车</h2>
  
        <!-- 商品列表 -->
        <div class="cart-list">
          <table class="goods-table">
            <thead>
              <tr>
                <th width="300">商品信息</th>
                <th width="200">价格</th>
                <th width="150">状态</th>
                <th width="120">操作</th>
              </tr>
            </thead>
            <tbody>
              <tr v-for="i in cartList" :key="i.goodsId" class="cart-item">
                <td class="goods-info">
                  <img :src="i.goodsPhoto" alt="商品图片" class="goods-image" />
                  <span class="goods-name">{{ i.goodsName }}</span>
                </td>
                <td class="price">&yen;{{ i.goodsPrice }}</td>
                <td class="status">
                  <el-tag :type="stateTagType(i.state)">{{ stateText(i.state) }}</el-tag>
                </td>
                <td class="actions">
                  <el-popconfirm title="确认删除吗?" @confirm="del(i.goodsId)">
                    <template #reference>
                      <button class="delete-btn">删除</button>
                    </template>
                  </el-popconfirm>
                </td>
              </tr>
  
              <!-- 空购物车提示 -->
              <tr v-if="cartList.length === 0">
                <td colspan="4">
                  <div class="empty-cart">
                    <el-empty description="购物车为空"></el-empty>
                  </div>
                </td>
              </tr>
            </tbody>
          </table>
        </div>
  
        <!-- 结算栏 -->
        <div class="checkout-bar">
          <div class="summary">
            共 <span class="highlight">{{ count.sum }}</span> 件商品，
            合计：<span class="total-price">&yen;{{ count.price }}</span>
          </div>
          <button class="checkout-btn" @click="placeOrder()">立即结算</button>
        </div>
      </div>
    </div>
  </template>

<style scoped>
.custom-cart-page {
    background-color: #f7f9fc;
    padding: 40px 20px;
  
    .cart-container {
      max-width: 1000px;
      margin: 0 auto;
      background: #fff;
      border-radius: 12px;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
      padding: 30px;
    }
  
    .cart-title {
      font-size: 24px;
      font-weight: bold;
      color: #2e9c8f;
      margin-bottom: 20px;
    }
  
    .goods-table {
      width: 100%;
      border-collapse: collapse;
  
      th {
        text-align: left;
        padding: 12px 16px;
        background-color: #e8f7f3;
        color: #2e9c8f;
        font-weight: 600;
      }
  
      td {
        padding: 14px 16px;
        border-bottom: 1px solid #eaeaea;
      }
  
      .goods-info {
        display: flex;
        align-items: center;
        gap: 12px;
  
        .goods-image {
          width: 60px;
          height: 60px;
          object-fit: cover;
          border-radius: 8px;
          transition: transform 0.3s ease;
        }
  
        &:hover .goods-image {
          transform: scale(1.1);
        }
  
        .goods-name {
          font-size: 15px;
          color: #333;
        }
      }
  
      .price {
        font-weight: 600;
        color: #2e9c8f;
      }
  
      .status {
        .el-tag {
          font-size: 13px;
          padding: 4px 10px;
        }
      }
  
      .actions {
        .delete-btn {
          background-color: #ff4d4d;
          color: white;
          border: none;
          padding: 6px 12px;
          border-radius: 6px;
          cursor: pointer;
          transition: background-color 0.3s ease;
  
          &:hover {
            background-color: #cc0000;
          }
        }
      }
    }
  
    .checkout-bar {
      margin-top: 30px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      background: #e8f7f3;
      padding: 16px 20px;
      border-radius: 10px;
  
      .summary {
        font-size: 16px;
        color: #333;
  
        .highlight {
          color: #2e9c8f;
          font-weight: bold;
        }
  
        .total-price {
          color: #cf4444;
          font-weight: bold;
        }
      }
  
      .checkout-btn {
        background-color: #2e9c8f;
        color: white;
        border: none;
        padding: 10px 20px;
        border-radius: 8px;
        font-size: 16px;
        cursor: pointer;
        transition: background-color 0.3s ease;
  
        &:hover {
          background-color: #1f7a70;
        }
      }
    }
  
    .empty-cart {
      text-align: center;
      padding: 60px 0;
    }
  }
</style>
